<template>
  <div>
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
            style="width: 200px;min-height: calc(100vh - 50px);"
            default-active="/user"
            router
            class="el-menu-vertical-demo">
          <!--            :default-openeds="[1]"-->
          <!--          @open="handleOpen"
                    @close="handleClose"-->

          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>

              <span>系统管理</span>
            </template>
            <el-menu-item index="/user" >
              <el-icon><user /></el-icon>
              用户管理</el-menu-item>
            <el-menu-item index="/book">book管理</el-menu-item>
            <el-menu-item index="/news">news管理</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="2">
            <span>常用功能</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon>
              <document/>
            </el-icon>
            <span>Navigator Three</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon>
              <Upload/>
            </el-icon>
            <span>Navigator Four</span>

          </el-menu-item>
        </el-menu>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {Location, Document, Upload,User} from '@element-plus/icons-vue'

export default {
  name: "Aside", components: {
    Location, Document, Upload,User
  }
}
</script>

<style scoped>

</style>
